<template>
<Row class="layout-content-body">
  <dtable :columns="columns" :data-all="dataAll" :data-show="dataShow" :loading="loading" add edit del op check @refresh="getall()" @show="show" @add="add" @del="del" @edit="edit" />
</Row>
</template>

<script>
import api from '../../api';
// import router from '../../router'
import { mapMutations, mapGetters, mapState } from 'vuex';
import { inputString } from '@/common/utils';
import dtable from '@/components/table/dtable.vue';
export default {
  components: {
    dtable
  },
  data () {
    return {
      loading: false,
      columns: [
        {
          title: '名称',
          key: 'Name',
          sortable: true
        },
        {
          title: '说明',
          key: 'Remark',
          sortable: true
        },
        {
          title: '创建者',
          key: 'Creater',
          sortable: true
        }
      ],
      dataShow: true, // 是否显示表格数据查看表单
      dataAll: [],
      flowdata: {
        nodes: [
          {
            className: 'start',
            id: 'node-0',
            text: 'start',
            style: {
              left: '145px',
              top: '89px',
              lineHeight: '98px'
            }
          },
          {
            className: 'end',
            id: 'node-1',
            text: 'end',
            style: {
              left: '265px',
              top: '429px',
              lineHeight: '48px'
            }
          }
        ],
        edges: [
          {
            source: 'node-0',
            target: 'node-1',
            anchor: 'AutoDefault',
            uuids: ['node-0BottomCenter', 'node-1TopCenter'],
            labelText: 'yes'
          }
        ]
      }
    };
  },
  computed: {
    ...mapState(['isLogin', 'captchaUrl', 'cptId', 'msg']),
    filiterTableDate () {
      let e = this.dataAll.slice();
      let keys = this.searchKey;
      let filterData = function (element) {
        if (keys === '') {
          return true;
        }
        for (let o in element) {
          if (String(element[o]).indexOf(keys) >= 0) {
            return true;
          }
        }
        return false;
      };
      let fdata = e.filter(filterData);
      this.total = fdata.length;
      return fdata;
    },
    curTableData () {
      let from = this.pageSize * (this.current - 1);
      let to = from + this.pageSize;
      return this.filiterTableDate.slice(from, to);
    }
  },
  watch: {},
  mounted () {
    this.getall();
  },
  methods: {
    getall () {
      this.loading = true;
      this.$api.getFlow().then(res => {
        if (!res.error) {
          this.dataAll = res.Data;
          this.total = res.Data.length;
        } else {
          this.$Message.error(res.message);
        }
      });
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    show (row) {
      this.showItem = row;
      this.showData = true;
    },
    edit (index) {
      this.$api.getFlowOne(index.Id).then(
        res => {
          console.log(res.Data);
          this.flowdata = res.Data;
          this.flowdata.edit = true;
          setTimeout(() => {
            this.$router.push({
              name: '流程详情',
              params: {
                flowdata: this.flowdata
              }
            });
          }, 500);
        },
        err => {
          if (err) {
            this.$Message.error(err, 4);
          }
        }
      );
    },
    add () {
      this.flowdata.edit = false;
      this.$router.push({
        name: '流程详情',
        params: {
          flowdata: this.flowdata
        }
      });
    },
    del (row) {
      console.log(row);
      this.$api.deleteFlow(row).then(
        res => {
          if (!res.error) {
            this.getall();
            this.$Message.success(res.message);
          } else {
            this.$Message.error(res.data.message, 4);
          }
        },
        error => {
          if (error) {
            this.$Message.error(error, 4);
          }
        }
      );
    }
  }
};
</script>
